<template>
  <el-form ref="formRef" :model="state.ruleForm" size="default" label-width="130px" :rules="rules">
    <el-row :gutter="35">
      <el-col :xs="23" :sm="23" :md="23" :lg="23" :xl="23" class="mb20">
        <el-form-item label="任务名称" prop="name">
          <el-input v-model="state.ruleForm.name" placeholder="请输入任务名称" clearable></el-input>
        </el-form-item>
      </el-col>
      <el-col :xs="23" :sm="23" :md="23" :lg="23" :xl="23" class="mb20">
        <el-form-item label="出币总数" prop="bptotal">
          <el-input-number v-model="state.ruleForm.bptotal" :min="1" controls-position="right" placeholder="请输入出币总数" style="width: 100%;text-align: left;" />
        </el-form-item>
      </el-col>
      <el-col :xs="23" :sm="23" :md="23" :lg="23" :xl="23" class="mb20">
        <el-form-item label="直播地址" prop="livenum">
          <el-input v-model="state.ruleForm.livenum" placeholder="请输入直播地址" clearable></el-input>
        </el-form-item>
      </el-col>
      <el-col :xs="23" :sm="23" :md="23" :lg="23" :xl="23" class="mb20">
        <el-form-item label="直播名称" prop="livename">
          <el-input v-model="state.ruleForm.livename" placeholder="请输入直播名称" clearable></el-input>
        </el-form-item>
      </el-col>
      <el-col :xs="23" :sm="23" :md="23" :lg="23" :xl="23" class="mb20">
        <el-form-item label="出币时间" prop="outtime">
          <el-input v-model="state.ruleForm.outtime" placeholder="请输入出币时间" clearable></el-input>
        </el-form-item>
      </el-col>
      <el-col :xs="23" :sm="23" :md="23" :lg="23" :xl="23" class="mb20">
        <el-form-item label="一级代理商" prop="companyid">
          <el-select v-model="state.ruleForm.companyid" placeholder="请选择一级代理商" clearable class="w100">
            <el-option v-for="item in state.companyData" :key="item.id" :label="item.companyname" :value="item.id" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :xs="23" :sm="23" :md="23" :lg="23" :xl="23" class="mb20">
        <el-form-item label="工会" prop="laborunionid">
          <el-select v-model="state.ruleForm.laborunionid" placeholder="请选择工会" clearable class="w100">
            <el-option v-for="item in state.laborunionData" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script setup lang="ts" name="systemTaskForm">
// 后台接口
import { systemApi } from '/@/api/system/index';
const rules = reactive({
	name: [{ required: true, message: '请输入任务名称', trigger: 'blur' }],
	bptotal: [{ required: true, message: '请输入出币总数', trigger: 'blur' }],
	livenum: [{ required: true, message: '请输入直播地址', trigger: 'blur' }],
	livename: [{ required: true, message: '请输入直播名称', trigger: 'blur' }],
	outtime: [{ required: true, message: '请输入出币时间', trigger: 'blur' }],
	companyid: [{ required: true, message: '请选择一级代理商', trigger: 'change' }],
	laborunionid: [{ required: true, message: '请选择工会', trigger: 'change' }],
});
const formRef = ref();
const state = reactive({
  ruleForm: {
    name: '',
    bptotal: '',
    livenum: '',
    livename: '',
    outtime: '',
    companyid: '',
    laborunionid: '',
  },
  companyData: <any>[], // 一级代理商数据
  laborunionData: <any>[], // 工会数据
})
// 初始一级代理商数据
const initCompanyData = async () => {
	let res: any = await systemApi().getCompanyListNopage();
	state.companyData = res.datas;
};
// 初始工会数据
const initLaborunionData = async () => {
	let res: any = await systemApi().getLaborunionListNopage();
	state.laborunionData = res.datas;
};
// 清空表单验证
const resetFields = () => {
  state.ruleForm = {
    name: '',
    bptotal: '',
    livenum: '',
    livename: '',
    outtime: '',
    companyid: '',
    laborunionid: '',
  }
	formRef.value.resetFields();
};
// 页面加载时
onMounted(() => {
	initCompanyData();
	initLaborunionData();
});
// 暴露变量
defineExpose({
	resetFields,
  formRef
});
</script>

<style scoped lang="scss">
:deep(.el-input-number .el-input__inner){
	text-align: left;
}
</style>